<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>049-矩形会变大并改变颜色</title>
</head>

<body>
    <p><b>Note:</b> This example only works in Firefox and Google Chrome.</p>

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect id="rec" x="300" y="100" width="300" height="100" style="fill:lime">
            <animate attributeName="x" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="0" />
            <animate attributeName="y" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="0" />
            <animate attributeName="width" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="800" />
            <animate attributeName="height" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="300" />
            <animateColor attributeName="fill" attributeType="CSS" from="lime" to="red" begin="2s" dur="4s"
                fill="freeze" />
        </rect>
    </svg>
</body>

</html>